<template>
  <select id="select" @change="handleClick($event)">
    <option value="None">选择删除</option>
    <option value="Point">点</option>
    <option value="LineString">线</option>
    <option value="Polygon">面</option>
  </select>
</template>
<script setup>
import { onMounted, inject, ref, onBeforeUnmount } from 'vue'
let docLayer
let $map
let layer
let source
var type = ref('')
onMounted(() => {
  $map = inject('$map')
 
  docLayer = $map.getLayers().getArray()[2]
  layer = $map.getLayers().getArray()[1]
  source = layer.values_.source
})
let draw
//添加要素的函数
function handleClick(evt) {
  console.log($map)
  type.value = evt.target.value
  //清除上一次的画笔
  if (draw) {
    $map.removeInteraction(draw)
  }
  if (type == 'None') {
    source.clear()
    return
  }
  //绘制要素
  draw = createDraw({
    type: 'Box',
    source,
    callback: handleDraw,
  })
  $map.addInteraction(draw)
}
function handleDraw(feature) {
  if (type.value == 'Point') {
    var service = {
      name: 'gis_plr',
      layerId: 2,
    }
    Query.queryByGeom({
      feature,
      service,
      callback: (res) => {
        console.log(res)
        var featureIds = res.map((item) => Number(item.id_))

        delFeature({
          service,
          featureIds,
          docLayer,
        })
        source.clear()
      },
    })
  } else if (type.value == 'LineString') {
    var service = {
      name: 'gis_plr',
      layerId: 1,
    }
    Query.queryByGeom({
      feature,
      service,
      callback: (res) => {
        console.log(res)
        var featureIds = res.map((item) => Number(item.id_))
        delFeature({
          service,
          featureIds,
          docLayer,
        })
        source.clear()
      },
    })
  } else {
    var service = {
      name: 'gis_plr',
      layerId: 0,
    }
    Query.queryByGeom({
      feature,
      service,
      callback: (res) => {
        console.log(res)
        var featureIds = res.map((item) => Number(item.id_))

        delFeature({
          service,
          featureIds,
          docLayer,
        })
        source.clear()
      },
    })
  }
 
}
onBeforeUnmount(() => {
  $map.removeInteraction(draw)
})
</script>
<style scoped>
#select {
  position: fixed;
  top: 30px;
  left: 200px;
  width: 80px;
  height: 30px;
}
</style>
